<script setup lang="ts">
import {onMounted, ref} from "vue";
import {storeToRefs} from "pinia";
import {ElMessage} from "element-plus";
import {pageInterface} from "@/views/home/Interface/Interface.ts";
import useHomeStore from "@/pinia/homeStore.ts";
import Carousel from "@/views/home/components/carousel/carousel.vue";
import Search from "@/views/home/components/search/search.vue";
import Level from "@/views/home/components/level/level.vue";
import Region from "@/views/home/components/region/region.vue";
import Card from "@/views/home/components/card/card.vue";
import Tips from "@/views/home/components/tips/tips.vue";


const homeStore = useHomeStore()
const pageParams = ref<pageInterface>({
  pageNo: 1,
  pageSize: 20,
  hostType: '',
  districtCode: ''
})

const loading = ref<Boolean>(false)
const {hospitalListInfo} = storeToRefs(homeStore)
const fetchHospitalList = async () => {
  try {
    loading.value = true
    await homeStore.fetchHospitalList(pageParams.value)
  } catch (error) {
    ElMessage.warning(error.message)
  } finally {
    loading.value = false
  }
}
const handleSizeChange = (size: number) => {
  pageParams.value.pageSize = size
  fetchHospitalList()
}
const handleCurrentChange = (page: number) => {
  pageParams.value.pageNo = page
  fetchHospitalList()
}

const getLevel = (hostType: string) => {
  pageParams.value.hostType = hostType
  fetchHospitalList()
}

const getRegion = (districtCode: string) => {
  pageParams.value.districtCode = districtCode
  fetchHospitalList()
}

onMounted(() => {
  fetchHospitalList()
})

</script>

<template>
  <div class="home">
    <carousel :interval="2000"></carousel>
    <search></search>
    <el-row :gutter="20" v-loading="loading" element-loading-background="rgb(255, 255, 255)">
      <el-col :span="20">
        <level @get-level="getLevel"></level>
        <region @get-region="getRegion"></region>
        <div class="card-container">
          <template v-if="hospitalListInfo?.content?.length">
            <card v-for="(item) in hospitalListInfo.content" :key="item.id" :hospital="item"></card>
          </template>
          <template v-else>
            <el-empty description="暂时无医院列表数据"></el-empty>
          </template>
          <el-pagination
              v-model:current-page="pageParams.pageNo" v-model:page-size="pageParams.pageSize"
              :page-sizes="[20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
              :total="Number(hospitalListInfo.totalElements)" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" background>
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="4">
        <tips v-for="item in 5"></tips>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.home {
  padding: 0 20px;

  .card-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;


    .el-pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .el-empty {
      margin: 0 auto;
      height: 500px;
    }
  }
}
</style>
